<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-05-19 10:59:02
 * @LastEditors: younghxp
 * @LastEditTime: 2022-02-15 10:21:35
-->
<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :titleExplain="'包括所有在本银行开户的专户'"
    ></topTitle>
    <div class="mainCon" style="top: 212px">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <!-- <el-button
          class="commonBut saveBtn funComBut fr"
          icon="icon iconfont icontianjia"
          @click="roleAdd"
          v-sdc
        >添加专户</el-button>-->
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                placeholder="请输入项目名称"
                clearable
                v-model="filterField.projectName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="专户账号" class="row-padding-bottom">
              <el-input
                placeholder="请输入专户账号"
                clearable
                v-model="filterField.account"
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="是否签约" class="row-padding-bottom">
                <el-select
                  placeholder="请选择"
                  clearable
                  v-model="filterField.signed"
                >
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="专户银行" class="row-padding-bottom">
                <el-select
                  placeholder="请选择银行"
                  clearable
                  v-model="filterField.bankId"
                  @change="bankSelectChange"
                  @clear="bankSiteClear"
                >
                  <el-option
                    v-for="item in bankOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="网点" class="row-padding-bottom">
                <el-select
                  placeholder="请选择银行网点"
                  clearable
                  v-model="filterField.bankSiteId"
                >
                  <el-option
                    v-for="item in bankSiteOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="施工方" class="row-padding-bottom">
                <el-input
                  placeholder="请输入施工方"
                  clearable
                  v-model="filterField.pbName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="时间" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <exportBtn
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_YH_ACCOUNT_BILLS"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div class="searchTableActions">
          <span class="color333"
            >流水信息上次更新时间{{
              getTime
            }}，如流水未更新，请联系开户银行。</span
          >
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column prop="pbName" label="施工方" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectStatusDesc"
            label="状态"
            align="center"
            :formatter="formatId"
            min-width="200"
          ></el-table-column>
          <el-table-column
            label="专户账号"
            align="center"
            :formatter="formatTd"
            width="200"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.account || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="signed"
            label="是否签约"
            align="center"
            :formatter="formatTd"
            min-width="120"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.signed == 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="bankName"
            label="专户银行"
            align="center"
            :formatter="formatId"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="bankSiteName"
            label="网点"
            align="center"
            :formatter="formatId"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="payTotal"
            label="总缴纳(万元)"
            align="center"
            :formatter="dateForma"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="expensesTotal"
            label="支出(万元)"
            align="center"
            :formatter="dateForma"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="balance"
            v-if="!filterField.accassStartDate && !filterField.accassEndDate"
            label="余额(万元)"
            align="center"
            :formatter="dateForma"
            min-width="180"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="balance"
            sortable="custom"
            v-else
            label="余额(万元)"
            align="center"
            min-width="180"
            ><template slot-scope="scope">{{ `/` }}</template></el-table-column
          >
          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            width="160"
            fixed="right"
          >
            <template slot-scope="scope">
              <div v-if="(scope.row.signed && isShowDetailBtn) || isShowUpdate">
                <el-link
                  type="primary"
                  @click="roleDetail(scope.row)"
                  v-if="isShowDetailBtn"
                  >查看流水</el-link
                >
                <el-link
                  type="danger"
                  v-if="isShowUpdate && scope.row.signed == 0"
                  @click="modify(scope.row)"
                  >修改</el-link
                >
              </div>
              <div v-else>
                <span>--</span>
              </div>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
      <!-- 修改专户信息 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="isShowDetail"
        :close-on-click-modal="false"
        @close="cancelAccountDialog('ruleForm')"
        width="640px"
        class="oneColumnDialog"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-row class="salDialogItem salDialogItem1">
            <el-col :span="24" class="infoItem">
              <span class="salDialogItemLabel">项目名称：</span>
              <span style="text-indent: 100px" class="projectNameInfo">{{
                form.projectName
              }}</span>
            </el-col>
            <el-col :span="24" class="infoItem">
              <span class="salDialogItemLabel">施工方：</span>
              {{ form.pbName || '--' }}
            </el-col>
            <el-col :span="24" class="infoItem">
              <span class="salDialogItemLabel">开户银行：</span>
              {{ form.bankName || '--' }}
            </el-col>
          </el-row>
          <el-form-item label="银行网点：" prop="bankSiteId">
            <el-select
              v-model="form.bankSiteId"
              class
              :placeholder="form.bankId != '' ? '请选择' : '请先选择开户银行'"
              clearable
              filterable
              style="width: 224px"
            >
              <el-option
                v-for="(item, index) of bankBranchOptions"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专户账号：" prop="account">
            <el-input
              v-model="form.account"
              style="width: 224px"
              placeholder="请输入专户账号"
              maxlength="64"
            ></el-input>
          </el-form-item>
          <el-form-item label="专户开户凭证：">
            <uploadAnnex
              @getFileList="getFileList"
              :limitationFactor="limitationFactor"
              @getFile="getFile"
              :upLoadFile="form.uploadFile"
            />
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <uploadResult
                style="margin-left: 120px !important"
                :resultList="form.uploadFile"
                @callBackResult="getFile"
              />
            </el-col>
          </el-row>
          <!-- <el-row class="uploadResultBox">
            <el-col :span="24"> -->
          <!-- <uploadResult style="margin-left:120px !important" :resultList="form.uploadFile" @callBackResult='getFile' /> -->
          <!-- </el-col> -->
          <!-- <elementImage :upLoadFile="form.uploadFile"   :srcList="form.srcList" :oldSrcList="form.oldSrcList" @changeSrcList="changeSrcList"></elementImage> -->
          <!-- </el-row> -->
          <el-form-item
            label="农民工工资委托发放三方协议："
            class="agreementBox"
          >
            <uploadAnnex
              @getFileList="getFileListTwo"
              :limitationFactor="limitationFactorTwo"
              @getFile="getFileTwo"
              :upLoadFile="form.upLoadAgreementFile"
            />
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <uploadResult
                style="margin-left: 120px !important"
                :resultList="form.upLoadAgreementFile"
                @callBackResult="getFileTwo"
              />
            </el-col>
            <!-- <elementImage :upLoadFile="form.upLoadAgreementFile"   :srcList="form.agrSrcList" :oldSrcList="form.oldAgrSrcList" @changeSrcList="changeSrcListAgreement"></elementImage> -->
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button
            @click="cancelAccountDialog('ruleForm')"
            style="padding: 10px 20px"
            >取 消</el-button
          >
          <el-button
            type="primary"
            class="commonBtn"
            style="width: 76px"
            @click="saveBankInfo('ruleForm')"
            :loading="canLogin"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'esSpecialAccountList',
  mixins: [scrollTable],
  data() {
    return {
      advanced: false,
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传专户开户凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      limitationFactorTwo: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        fileId: 'salaryExcelAgr', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'ExcelAgreement', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传农民工工资委托发放三方协议，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      titleText: '专户列表',
      dialogTitle: '新增专户',
      tableList: [],
      requestUrl: '/api-acc/account/expand/accountpage',
      isShow: false, //列表加载
      loading: false,
      filterField: {
        projectName: '', //项目名称
        account: '', //专户账号
        signed: '', //是否签约
        bankId: '', //专户银行
        bankSiteId: '', //网点
        pbName: '',
        accassStartDate: '',
        accassEndDate: '',
      },
      pageSize: 20,
      pageNo: 1,
      isShowDetail: false,
      bankBranchOptions: [],
      form: {
        projectId: '',
        bankId: '',
        bankName: '',
        bankSiteId: '', //银行网点id
        pbName: '', //施工方
        account: '',
        uploadFile: [], //
        srcList: [],
        oldSrcList: [],
        upLoadAgreementFile: [], //三方协议
        agrSrcList: [],
        oldAgrSrcList: [],
      },
      rules: {
        bankSiteId: [
          { required: true, message: '请选择银行网点', trigger: 'change' },
        ],
        account: [
          {
            required: true,
            // pattern: /^([1-9]{1})(\d{11,18})((-)(\d{1,9}))*$/,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
      },
      isShowDetailBtn: '',
      isShowUpdate: '',
      isCz: false,
      canLogin: false,
      getTime: '',
      bankOptions: [],
      bankSiteOptions: [],
    }
  },
  created() {
    this.isShowDetailBtn =
      this.$store.state.buttonLimitsArr.indexOf('esSpecialAccountList:detail') >
      -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('esSpecialAccountList:update') >
      -1
    if (this.isCzUser()) {
      this.isCz = true
    }
    this.currentTime()
    this.getBank()
  },
  mounted() {
    var that = this
    this.$nextTick(function () {
      that.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    /**
     * @description: 获取收件起始日期
     * @param {*} val
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.accassStartDate = val
      } else {
        this.filterField.accassStartDate = ''
      }
    },
    /**
     * @description: 获取收件结束日期
     * @param {*} val
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.accassEndDate = val
      } else {
        this.filterField.accassEndDate = ''
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      this.form.srcList.push(val)
      this.form.oldSrcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.form.uploadFile = val
    },
    /**
     * @description: 获取上传的附件
     */
    getFileListTwo(val) {
      this.form.agrSrcList.push(val)
      this.form.oldAgrSrcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFileTwo(val) {
      this.form.upLoadAgreementFile = val
    },
    /**
     * @name: 格式化金额
     * @param {Object, Object}  row , column
     * @Author: 471826078@qq.com
     */
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc || daterc == '0') {
        let lately2 = daterc / 10000 //对小数点后3位四舍五入

        return this.toFixed(lately2, 2)
      } else {
        return '--'
      }
    },
    modify(item) {
      this.isShowDetail = true
      this.dialogTitle = '修改专户信息'
      this.axios
        .post('api-acc/account/expand/accountdetail', {
          projectId: item.projectId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            const {
              id,
              projectId,
              projectName,
              bankId,
              pbName,
              bankName,
              account,
              bankSiteId,
              openCertificateFiles,
              agreementFiles,
            } = res.data.result

            let srcList = []
            let oldSrcList = []
            if (openCertificateFiles.length > 0) {
              for (var i = 0; i < openCertificateFiles.length; i++) {
                srcList.push(openCertificateFiles[i].url)
                oldSrcList.push(openCertificateFiles[i].url)
              }
            }
            let agrSrcList = []
            let oldAgrSrcList = []
            if (agreementFiles.length > 0) {
              for (var i = 0; i < agreementFiles.length; i++) {
                agrSrcList.push(agreementFiles[i].url)
                oldAgrSrcList.push(agreementFiles[i].url)
              }
            }
            this.form = {
              projectId: id,
              projectName: item.projectName,
              bankId,
              pbName,
              bankName,
              account,
              bankSiteId,
              uploadFile: openCertificateFiles,
              srcList,
              oldSrcList,
              upLoadAgreementFile: agreementFiles,
              agrSrcList,
              oldAgrSrcList,
            }
            this.getBankBranchList(bankId)
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
    },
    /**
     * @name: 获取银行网点列表
     * @param {String}  bankId
     * @Author: 471826078@qq.com
     */
    getBankBranchList(bankId) {
      this.axios
        .post('api-acc/accountbank/expand/banksite', { bankId })
        .then((res) => {
          this.bankBranchOptions = res.data.result
        })
        .catch((error) => {
          this.$message({
            message: '获取网点数据失败',
            type: 'error',
          })
        })
    },

    changeSrcList(val) {
      this.accountForm.srcList = val
    },
    changeSrcListAgreement(val) {
      this.accountForm.agrSrcList = val
    },
    //专户弹框取消
    cancelAccountDialog() {
      this.isShowDetail = false
      this.form.srcList = []
      this.form.oldSrcList = []
      this.form.uploadFile = []
      this.form.upLoadAgreementFile = []
      this.form.agrSrcList = []
      this.form.oldAgrSrcList = []
      this.form.projectId = ''
      this.$refs.ruleForm.resetFields()
    },
    //保存专户信息
    saveBankInfo() {
      //确定按钮禁止点击
      this.canLogin = true
      this.$refs['ruleForm'].validate((valid) => {
        var url = ''
        if (valid) {
          url = 'api-acc/account/expand/update'
          let data = {
            token: window.localStorage.getItem('access_token'),
            projectId: this.form.projectId,
            id: this.form.projectId,
            account: this.form.account.replace(/\s+/g, ''),
            bankSiteId: this.form.bankSiteId, //新增银行网点地段
            bankId: this.form.bankId,
            openCertificateFile: JSON.stringify(this.form.uploadFile),
            agreementFile: JSON.stringify(this.form.upLoadAgreementFile),
          }

          this.saveAccountAjax(url, data)
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    //保存专户的ajax
    saveAccountAjax(url, data) {
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then(
          (res) => {
            this.canLogin = false
            if (!res.data.hasError) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
              this.isShowDetail = false //关闭弹窗
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData(
                  this.pageNo,
                  this.pageSize
                )
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.canLogin = false
            this.$message({
              message: '保存失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {
          this.canLogin = false
          this.$message({
            message: '保存失败',
            type: 'error',
          })
        })
    },
    searchList() {
      var that = this
      this.$nextTick(function () {
        that.$refs.pagination.getTableListData()
      })
    },
    roleDetail(item) {
      let { projectId } = item
      let { projectName } = item

      this.$router.push({
        path: '/home/specialAccount/companyAccountDetail',
        name: 'companyAccountDetail',
        query: {
          projectId,
          projectName,
          path: 'esSpecialAccountList',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enShiCustomRequirements/esSpecialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    currentTime() {
      this.getTime = this.getCurrentTime()
    },
    getBank() {
      this.axios({
        method: 'get',
        url: 'api-acc/accountbank/expand/bankList',
      })
        .then((response) => {
          if (!res.data.hasError) {
            this.bankOptions = response.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    getBankSite(bankId) {
      this.axios({
        method: 'post',
        url: 'api-acc/accountbank/expand/banksite',
        data: { bankId: bankId },
      })
        .then((response) => {
          if (!res.data.hasError) {
            this.bankSiteOptions = response.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    bankSelectChange(val) {
      if (val) {
        this.getBankSite(val)
      }
    },
    bankSiteClear() {
      this.bankSiteOptions = []
      this.filterField.bankSiteId = ''
    },
    renderHeader(h, { column }) {
      if (column.label == '是否签约') {
        return h('div', [
          h('span', column.label),
          h(
            'el-tooltip',
            {
              props: {
                effect: 'dark',
                content:
                  '已签约状态的专户不可修改，未签约状态的专户可修改，请核实专户是否正确或是否已签约。',
                placement: 'top',
              },
            },
            [
              h('i', {
                class: 'icon iconfont iconhuabanfuben',
                style: 'margin-left:5px;',
              }),
            ],
            {
              content:
                '已签约状态的专户不可修改，未签约状态的专户可修改，请核实专户是否正确或是否已签约。',
            }
          ),
        ])
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.salDialogItem,
.agreementBox {
  .el-col {
    // height: 36px;
    // line-height: 36px;
    // margin-bottom: 22px;
    padding: 7px 0;
    .salDialogItemLabel {
      width: 120px;
      text-align: right;
      display: inline-block;
      padding-right: 12px;
    }
  }
  .salDialogItemUpload {
    .salDialogItemLabel {
      width: 120px;
      line-height: 20px;
      padding-right: 12px;
    }
    .upload-demo {
      display: inline-block;
    }
    .el-button {
      width: 100px;
      height: 36px;
      border-radius: 18px;
      background-color: #fff;
      border-color: #009588;
      color: #009588;
      margin-right: 10px;
    }
  }
  .uploadBox {
    position: relative;
    vertical-align: top;
    .uploadImg {
      width: 96px;
      height: 36px;
      color: #009588;
      border: 1px solid #009588;
      line-height: 10px;
    }
    .uploadImgState1 {
      width: 120px;
      display: inline-block;
      padding-right: 12px;
      text-align: right;
      font-size: 14px;
      color: #999999;
      vertical-align: middle;
    }
    .uploadImgState2 {
      height: 40px;
      line-height: 20px;
    }
    .uploadImgState {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      display: inline-block;
      color: #999999;
      // margin-left: 12px;
    }
    .upLoadDom {
      position: absolute;
      top: 0;
      left: 120px;
      opacity: 0;
      input {
        width: 100px;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
      }
    }
  }
}

.agreementBox .el-col {
  padding: 0;
}
.agreementBox {
  /deep/label {
    line-height: 20px;
  }
}
.salDialogItem1 {
  .el-col {
    position: relative;
    padding-left: 120px;
    .salDialogItemLabel {
      position: absolute;
      left: 0;
      top: 7px;
      width: 120px;
      text-align: right;
      display: inline-block;
      padding-right: 12px;
    }
  }
}
.imgStyle {
  margin-left: 135px;
  li {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    .iconjian {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-image {
      cursor: pointer;
    }
  }
}

.infoItem {
  margin-bottom: 12px;
}

.projectNameInfo {
  line-height: 20px;
}

.salDialogItemUpload /deep/ ul {
  margin-bottom: 0 !important;
}
</style>
<style>
.salDialog .el-dialog__footer {
  height: 66px !important;
  padding: 15px 20px;
}
.salDialog .el-dialog__body {
  padding: 17px;
}
</style>
